<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>15 map的原理</title>
    <style>
        h1 {
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>15 map的原理</h1>
</body>
<script>

    // map(fn): 返回一个数量相等的数组，内容是什么取决于在fn中的返回值 （了解原理）

    // 需求：给数组的每一项增加20%

    var arr4 = [3, 5, 7];

    function map(callback, arr) { // 形参：用来接收回调函数的
        var res = []; // 存处理好的数据，以后要返回到入口处
        arr4.forEach(function(val) { // val指的是arr4里面的每一项值
            var num = callback(val); // 入口，实参
            res.push(num);
        });
        return res;
    };

    var arr = map(function (item) { // 实参就是一个函数（回调函数），item就是接收callback传过来的实参
        return (item * 1.2).toFixed(2);
    },arr4);

    console.log(arr);

    var arr2 = map(function (item) {
        return item + 5;
    },arr4);

    console.log(arr2);

    var arr3 = map(function (item) {
        return `<li>${item}</li>`;
    });

    console.log(arr3.join());


</script>
</html>